<template>
  <div class="details">
    <!-- <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>{{detailMes.titleName}}</el-breadcrumb-item>
    </el-breadcrumb> -->
    <el-card class="box_card">
      <h2>{{detailMes.titleName}}</h2>
      <div class="box_card_record">
        <span><i class="iconfont icon-shijian deepIcon"></i> {{detailMes.pTime}}</span>
        <span><i class="iconfont icon-chakan deepIcon"></i>{{detailMes.viewNums}} 次阅读</span>
        <!-- <span><i class="iconfont icon-xinxi deepIcon"></i>{{detailMes.replyNums}}评论</span> -->
      </div>
      <div class="box_card_user">
        <div class="box_card_user_left">
          <img :src="userMes.uAvatar" alt="">
          <div class="box_card_user_leftMes">
            <h3>{{userMes.nickname}}</h3>
            <div>
              <span>粉丝：{{userMes.fansNum}}</span>
              <span>帖子：{{userMes.postMesTotal}}</span>
            </div>
          </div>
        </div>
        <el-button v-if="isLoginUser" @click="followUser(userMes.uId)" :disabled="disabled">{{followBtn}}</el-button>
        <el-tooltip v-else class="item" effect="dark" content="不能关注自己" placement="top">
          <el-button>关注</el-button>
        </el-tooltip>
      </div>
      <div class="box_card_content">
        <div class="box_card_content_wiki" v-if="detailMes.wId!=null">
          <el-descriptions title="推荐节点列表" :column="2" border style="width:500px;">
            <el-descriptions-item label="名称">{{wikiMes.wName}}</el-descriptions-item>
            <el-descriptions-item label="版本">{{wikiMes.eName}}</el-descriptions-item>
            <el-descriptions-item label="地址">{{wikiMes.wLink}}</el-descriptions-item>
            <el-descriptions-item label="领域">{{wikiMes.tName}}</el-descriptions-item>
          </el-descriptions>
        </div>
        <div class="box_card_content_pImg">
          <img :src="detailMes.pImg" alt="">
        </div>
        <div v-html="detailMes.pDescribe"></div>
        <div class="box_card_content_bottom">
          <div class="box_card_content_bottomLeft">
            <p>本文为我原创&nbsp;本文禁止转载或摘编</p>
            <div>
              <i class="iconfont icon-biaoqian"></i>
              <!-- 筛选出热度比较高的标题词语 例如：工作 放假 小长假等 -->
              <el-link target="_blank" class="box_card_content_bottomLeft_tags">生活</el-link>
            </div>
          </div>
          <el-link target="_blank">投诉或建议</el-link>
        </div>
      </div>
    </el-card>
    <el-card class="box_card">
      <div class="box_card_recommend">
        <h3>推荐帖</h3>
        <el-link href="http://localhost:8080/">更多精彩内容></el-link>
      </div>
      <div v-for="hItem in hotMes" :key="hItem.pId">
        <subassembly :attrs="hItem"></subassembly>
      </div>
    </el-card>
    <el-card class="box_card">
      <h3>{{discussMes.length}}评论</h3>
      <comment :pId="detailMes.pId"></comment>
      <div v-for="dItem in discussMes" :key="dItem.rId">
        <discuss :attrs="dItem"></discuss>
      </div>
    </el-card>
    <el-backtop :visibility-height="100">UP</el-backtop>
  </div>
</template>
<script>
import comment from '../comment/Comment.vue'
import subassembly from './HomeSubassembly.vue'
import discuss from './Discuss.vue'
  export default {
    name: 'Details',
    components: {
      subassembly,
      discuss,
      comment
    },
    data() {
      return {
        uMesTotal:0,
        detailMes:{},
        hotMes:[],
        discussMes:[],
        userMes:{},
        loginUser:{},
        isLoginUser:true,
        followBtn: "关注",
        disabled: false,
        wikiMes:{}
      }
    },
    created(){
      this.detailMes = JSON.parse(this.$route.query.detail)
      console.log(this.detailMes)
      // this.detailMes.pTime = this.common.changeTimeFormat(this.detailMes.pTime)
      // console.log(detail)
      this.getHotPosts()
      this.getReplyBypId()
      // console.log(this.detailMes.uId)
      this.getUserByuId(this.detailMes.uId)
      this.getuserInfo()
      if(this.detailMes.wId!=null){
        this.getWikiByWid()
      }
    },
    methods:{
      getWikiByWid(){
        var params = {}
        params.wId = this.detailMes.wId
        this.$axios.getWikiByWid(params).then(res=>{
          console.log("链接")
          console.log(res)
          this.wikiMes = res.data
        })
      },
      // 查看当前帖子的用户是否被当前登录的用户关注
      isFollow(followId,uId){
        let params = {}
        params.followedId = followId
        params.uId = uId
        console.log(params)
        this.$axios.getFollow(params).then(res=>{
          console.log(res)
          if(res.data!=null){
            this.followBtn = "已关注"
            this.disabled = true
          }
        })
      },
      // 关注用户
      followUser(uId){
        // 关注用户
        let params = {}
        console.log(uId)
        if(this.cookies.getToken('X-Token')==null){
          this.$message({
            message: '要先登录才可以关注哦！',
            type: 'warning'
          });
        }else{
          // 点击关注按钮，被关注用户粉丝数+1，登录用户关注用户信息加1
          params.followedId = uId;
          params.fansNum = this.userMes.fansNum
          params.uId = this.loginUser.uId;
          this.$axios.updateFollow(params).then(res=>{
            console.log(res)
            this.followBtn = "已关注"
            this.disabled = res.data.isFollow
            this.userMes.fansNum = res.data.fansNum
          })

        }
      },
      // 根据登录token实现关注
      getuserInfo(){
        let params = {}
        params.token = this.cookies.getToken('X-Token')
        // console.log(params.token!=null)
        if(params.token!=null){
          this.$axios.getUserInfo(params).then(res=>{
            console.log(res.data.uId)
            this.loginUser = res.data;
            this.isFollow(this.detailMes.uId,res.data.uId)
            if(res.data.uId==this.detailMes.uId){
              console.log("是登录用户")
              this.isLoginUser = false
            }else{
              console.log("不是登录用户")
              this.isLoginUser = true
            }
          })
        }else{
          this.isLoginUser = true
        }

      },
      // 根据uId获取用户信息
      getUserByuId(uId){
        let params = {}
        params.uId = uId
        this.$axios.getUserByuId(params).then(res=>{
          console.log(res)
          this.userMes = res.data

        })
      },
      // 根据pId获取评论
      getReplyBypId(){
        let params = {}
        params.pId = this.detailMes.pId
        // console.log(params)
        this.$axios.getReplyBypId(params).then(res => {
          this.discussMes = res.data
          console.log(res)
        })
      },
      goBack() {
        console.log('go back');
      },
      getHotPosts(){
        let params = {}
        params.tId = this.detailMes.tId
        params.num = 2
        this.$axios.getHotPostsBytId(params).then(res=>{
          this.hotMes = res.data
          // console.log(res.data)
        })

      }
    }
  }
</script>
<style scoped>
  .details {
    width: 900px;
    margin: 20px auto 10px;
    /* position: inherit; */
  }
  .box_card {
    margin-top: 20px;
    padding: 20px;
  }
  .box_card_recommend {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 10px;
    border-bottom: 1px solid rgb(241, 235, 235);
  }
  .box_card_record {
    margin: 20px 0;
  }
  .box_card_record>span {
    margin-right: 20px;
  }
  .box_card_user {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid rgb(241, 235, 235);
    padding-bottom: 20px;
  }
  .box_card_user_left {
    display: flex;
  }
  .box_card_user_left>img {
    width: 50px;
    height:50px;
    border-radius: 50%;
    margin-right: 10px;
  }
  .box_card_user_left>div>span {
    margin-right: 20px;
  }
  .box_card_content {

  }
  .box_card_content_wiki {
    margin: 20px auto;
    width: 500px;
  }
  .box_card_content_pImg {
    margin: 20px auto;
    text-align: center;
  }
  .box_card_content_pImg>img {
    width: 500px;
    height: 300px;
  }
  .box_card_content_bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    border-top: 2px solid rgb(241, 235, 235);
    margin-top: 20px;
    padding-top: 20px;
  }
  .box_card_content_bottomLeft>div {
    margin: 10px 0;
    display: flex;
    align-items: center;
  }
  .box_card_content_bottomLeft_tags {
    margin: 0 10px;
  }
  .my-label {
    background: #E1F3D8;
  }

  .my-content {
    background: #FDE2E2;
  }
</style>
